// 播放列表组件
<template>
  <div class="playList">
     <!-- 歌曲表头 -->
    <div class="playTop">
      <div class="left">
        <span class="iconfont icon-bofang"></span>
        <span class="title">播放全部<span class="sum" v-if="playlist.tracks">(共{{playlist.tracks.length}}首)</span></span>
      </div>
      <div class="right" @click="shoucang(e)" ref="text">+收藏({{changeValue(playlist.subscribedCount)}})</div>
    </div>
    <!-- 歌曲表单 -->
    <div class="list">
      <!-- 循环playlist.tracks -->
      <div   @click="play(item,index)" class="listItem" v-for="(item,index) in playlist.tracks" :key="index">
        <div class="listLeft">
          <!-- 索引 -->
          <div class="index">{{index+1}}</div>
          <!-- 列表 -->
          <div class="content">
            <div class="title">{{item.name}}</div>
            <div class="anthor">
              <span>{{item.al.name}}</span>
            </div>
          </div>
        </div>
        <div class="listRight">
          <div class="iconfont icon-shipinbofangyingpian"></div>
          <div class="iconfont icon-gengduo"></div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import store from '@/store/index';
export default {
  // props:['playlist'],
  methods: {
    shoucang(e){
      this.$refs.text.innerText = '√ 收藏'+`${this.changeValue(this.playlist.subscribedCount)}`
    },
    changeValue(num) {
      var res=0;
      if(num>=10000){
          res = num/10000
          res = res.toFixed(2) + "万"
      }
      return res
    },
    play(item,index){
      
      console.log(index);
      store.commit('setPlayIndex', index)
      
    }
  },
  // computed:{
  //       // 里面的参数必须是数组或者对象
  //       ...mapMutations(['playCurrentIndex'])
  //   },
    computed:{
        // 接收store里面的参数
        ...mapState([
            'playlist',
            'playCurrentIndex',
            'al',
            'name',
            'tracks',
            'id'
        ])
    }

}
</script>

<style lang="less" scoped>
.playList{
  width: 7.5rem;
  padding: 0 0.4rem;
  background-color: #fff;
  height: auto;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
    .playTop{
      // height: 0.8rem;
      padding-top: 0.5rem;
      display: flex;
      justify-content: space-between;
      font-size: 0.4rem;
      .left{
        .iconfont{
          font-size: 0.5rem;
          line-height: 0.8rem;
        }
        .title{
          font-size: 0.4rem;
          font-weight: 700;
          margin-left: 0.1rem;
          .sum{
            color: darkgray;
            font-size: 0.3rem
          }
        }
      }
      .right{
        font-size: 0.3rem;
        color: #ccc;
        background-color: red;
        padding: 0.2rem;
        border-radius: 0.5rem
      }
    }
    .list{
      margin-bottom: 1rem;
      // 歌单列表项样式
      .listItem{
        display: flex;
        justify-content: space-between;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        // 左边样式
        .listLeft{
          display: flex;
          justify-content: space-around;
          align-items: center;
          .index{
            color: #666;
            width: 0.7rem;

          }
          .content{
            display: flex;
            flex-direction: column;
            .title{
              font-size: 0.38rem;
              color: rgb(27, 24, 24);
              font-weight: 550;
              margin-bottom: 0.1rem;
            }
            .anthor{
              font-size: 0.3rem;
              color: #666;
              display: flex;
            }
          }
        }
        // 右边图标样式
        .listRight{
          display: flex;
          .iconfont{
            font-size: 0.4rem;
            margin: 0 0.1rem;
          }
          // 三个点加粗
          .iconfont:last-child{
            font-weight: 900
          }
        }
      }
    }
}
  
</style>
